<!DOCTYPE html>
<html lang="En">
  <head>
    <meta charset="UTF-8" />
    <title>时钟</title>
    <link rel="stylesheet" href="./reset.css" />
    <style>
      @import url("https://fonts.googleapis.com/css?family=Roboto");

      html {
        display: flex;
        align-items: center;
        justify-content: center;

        width: 100%;
        height: 100%;
      }

      svg {
        display: none;
      }

      body {
        background-color: #0f0e0e;
        margin: 0;
      }

      .hour_marker {
        fill: transparent;
        stroke: #f0f0c9;
        stroke-width: 7;
        stroke-dasharray: 0.2, 4.8;
        stroke-dashoffset: 0.1;
      }

      .minute_marker {
        fill: transparent;
        stroke: lightslategray;
        stroke-width: 7;
        stroke-dasharray: 0.2, 0.8;
        stroke-dashoffset: 0.1;
      }

      .hand {
        stroke: #ffffff;
        stroke-width: 2;
        stroke-linecap: round;
      }

      .hand--thick {
        stroke-width: 7;
      }

      .hand--second {
        stroke: yellow;
      }

      .center {
        fill: #7b0828;
        stroke-width: 2;
        stroke: white;
      }

      .text {
        fill: #f0f0c9;
        font-family: "Roboto", sans-serif;
        text-anchor: middle;
        cursor: pointer;
        user-select: none;
      }

      #youtube,
      #youtube-card {
        display: none;
        font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
        color: black;
      }

      @media (min-height: 425px) {
        /** Youtube logo by https://codepen.io/alvaromontoro */
        #youtube {
          z-index: 50;
          width: 100px;
          display: block;
          height: 70px;
          position: fixed;
          bottom: 20px;
          right: 20px;
          background: red;
          border-radius: 50% / 11%;
          transform: scale(0.8);
          transition: transform 0.5s;
        }

        #youtube:hover,
        #youtube:focus {
          transform: scale(0.9);
          color: black;
        }

        #youtube::before {
          content: "";
          display: block;
          position: absolute;
          top: 7.5%;
          left: -6%;
          width: 112%;
          height: 85%;
          background: red;
          border-radius: 9% / 50%;
        }

        #youtube::after {
          content: "";
          display: block;
          position: absolute;
          top: 20px;
          left: 40px;
          width: 45px;
          height: 30px;
          border: 15px solid transparent;
          box-sizing: border-box;
          border-left: 30px solid white;
        }

        #youtube span {
          font-size: 0;
          position: absolute;
          width: 0;
          height: 0;
          overflow: hidden;
        }

        #youtube:hover + #youtube-card {
          z-index: 49;
          display: block;
          position: fixed;
          bottom: 12px;
          right: 10px;
          padding: 25px 130px 25px 25px;
          width: 300px;
          background-color: white;
        }
      }
    </style>
  </head>

  <body>
    <svg width="200" height="200" viewBox="-100 -100 200 200">
      <circle class="minute_marker" r="90" pathLength="60" />
      <circle class="hour_marker" r="90" pathLength="60" />
      <text id="text" class="text" x="45" y="5"></text>

      <g id="hour_hand">
        <line class="hand" x1="0" y1="0" x2="0" y2="-50" />
        <line class="hand hand--thick" x1="0" y1="-12" x2="0" y2="-50" />
      </g>

      <g id="minute_hand">
        <line class="hand" x1="0" y1="0" x2="0" y2="-80" />
        <line class="hand hand--thick" x1="0" y1="-12" x2="0" y2="-80" />
      </g>

      <g id="second_hand">
        <line class="hand hand--second" x1="0" y1="12" x2="0" y2="-80" />
      </g>

      <circle class="center" r="3" />
    </svg>
    <!-- 响应事件 -->
    <!-- <a id="youtube" target="_blank" href="https://www.youtube.com/watch?v=ULomsOSk4JA">
        <span>Learn how to animate SVG from JavaScript</span>
      </a>
      <div id="youtube-card">
        SVG + JavaScript Tutorial: How to animate SVG from JavaScript
      </div> -->
  </body>
  <script>
    /*

Learn how to code this watch step by step on YouTube:

https://www.youtube.com/watch?v=ULomsOSk4JA

Follow me on twitter for more: https://twitter.com/HunorBorbely

*/

    const textElement = document.getElementById("text");
    const hoursElement = document.getElementById("hour_hand");
    const minutesElement = document.getElementById("minute_hand");
    const secondsElement = document.getElementById("second_hand");

    let showDate = true;

    function animate() {
      const date = new Date();

      const day = date.getDate();
      const ampm = date.getHours() >= 12 ? "PM" : "AM";
      const hour = date.getHours() + date.getMinutes() / 60;
      const minute = date.getMinutes() + date.getSeconds() / 60;
      const second = date.getSeconds() + date.getMilliseconds() / 1000;

      textElement.textContent = showDate ? day : ampm;
      hoursElement.setAttribute("transform", `rotate(${(360 / 12) * hour})`);
      minutesElement.setAttribute(
        "transform",
        `rotate(${(360 / 60) * minute})`
      );
      secondsElement.setAttribute(
        "transform",
        `rotate(${(360 / 60) * second})`
      );

      requestAnimationFrame(animate);
    }

    requestAnimationFrame(animate);

    textElement.addEventListener("click", () => {
      showDate = !showDate;
    });

    document.querySelector("svg").style.display = "block";
  </script>
</html>
